<template>
    <div class="home-featured-card">
        <b-link :href="`/rooms?id=${data.id}`" class="item-link">
            <div class="item-img"><img :src="data.cover || require('../assets/images/img2.jpg')" alt=""></div>
            <div class="item-info">
            <div class="item-label">
                <span v-for="(item,index) in data.tags" :key="index">{{item}}/</span>
            </div>
            <div class="item-name">{{data.title}}</div>
            <div class="item-price">
                <strong class="strong">¥{{data.price/100}}</strong>
                <span class="span">{{data.room}}居/{{data.bed}}床/宜住{{data.people}}人</span>
                <label class="label">评价：<i v-for="item in data.rate"  :key="item" class="iconfont icon-wuxing"></i></label>
            </div>
            </div>
        </b-link>
    </div>
</template>

<script>
export default {
    props:{
        data:{
            type:[Object],
            default:''
        }
    }
}
</script>


<style lang="less">
.home-featured-card{
    margin-bottom:15px;
    .item-link{
    display: block;
    .item-img{
        border-radius:5px;
        width:100%;
        overflow: hidden;
        img{
        width:100%;
        border-radius:5px;
        }
    }
    .item-info{
        padding:5px 0;
        .item-label{
        color:#a0a0a0;
        font-size:12px;
        }
        .item-name{
        font-size:16px;
        font-weight: 600;
        color:#000;
        }
        .item-price{
        display: flex;
        align-items: center;
        .strong{
            color:#000;
            font-size:18px;
            font-weight:400;
            margin-right:10px;
        }
        .span{
            color:#a0a0a0;
            font-size:12px;
            flex:2;
        }
        .label{
            color:#000;
            font-size:12px;
            font-weight:800;
            i{
            color:#e1bf00;
            }
        }
        }
    }
    }
}
</style>

